<template>
  <div class="flex">
    <div class="row auto">
      <div class="col-xs-3">
        <p class="text-left">用户编号</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_userinfo_id }}</p>
      </div>
    </div>
    <div class="row auto ">
      <div class="col-xs-3">
        <p class="text-left">用户姓名</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_user_name }}</p>
      </div>
    </div>
    <div class="row auto ">
      <div class="col-xs-3">
        <p class="text-left">用户地址</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right">{{ model.f_address }}</p>
      </div>
    </div>
    <div class="row auto ">
      <div class="col-xs-3">
        <p class="text-left">上期底数</p>
      </div>
      <div class="col-xs-9">
        <p class="text-right app-text-muted">{{ model.f_tablebase }}</p>
      </div>
    </div>
    <div class="row auto mt-10">
      <div class="col-xs-6 hidden-md hidden-lg">
        <avatar-upload :img-src.sync="model.imgInfo" :filename.sync="model.imgName" v-ref:imginfo></avatar-upload>
      </div>
      <div class="col-xs-6 col-md-12 col-lg-12">
        <br class="hidden-md hidden-lg">
        <br class="hidden-md hidden-lg">
        <input type="text" class="form-control" v-model="model.f_new_tablebase" maxlength="10">
      </div>
    </div>
    <div class="row auto">
      <p class="mt-10  col-xs-6 hidden-md hidden-lg">请录入抄表照片</p>
      <p class="mt-10 col-xs-6">请录入本期表底数</p>
    </div>
    <div class="row auto mt-10  col-xs-12 col-sm-12 col-md-1 col-md-1">
      <button type="button" class="btn btn-primary" style="width: 100%;" @click="commit()">提交</button>
    </div>
    <div class="row auto mt-10">
      <p class="text-warning">提示：表底数输入燃气表黑色部分数字</p>
    </div>
  </div>
</template>
<script>
export default {
  title: '手机单户抄表',
  data () {
    return {
      model: {
        imgInfo: '',
        imgName: '',
        f_tablebase: ''
      },
      flag: false
    }
  },
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          f_meter_state: '未抄表',
          f_whether_pay: '否',
          f_user_type: '民用',
          f_price_id: '3',
          f_meternumber: '123456',
          f_outlets: '梅河口燃气有限公司',
          f_userinfo_id: '2',
          f_price_name: '居民阶梯',
          meternumber_state: '有表号',
          f_price_type: '阶梯气价',
          f_tablebase: 0,
          id: '2',
          f_hand_date: '2018-05-10',
          f_filiale: '四川省洪雅县天然气有限公司',
          f_meter_style: 'PB2.5',
          f_meter_source: '手动录入',
          f_oughtfee: '0',
          f_oughtamount: '0',
          f_meter_brand: '机表',
          f_residential_area: '小区五名称',
          f_meter_type: '机表',
          version: '2',
          h_user_id: '2',
          f_address: '高新区-唐延堡街道-小区五名称3号楼3单元3层303室',
          f_inputtor: '999',
          f_sell_id: 'null',
          f_remanent_gas: '0',
          f_meter_classify: '机表',
          userinfo_version: '1',
          f_user_id: '2',
          f_gasproperties: '居民用气',
          f_user_name: '杨森',
          f_fire_state: '0',
          f_issued_state: '手动下发'
        }
      }
    }
  },
  ready () {
    // 抄表按钮可以点击
    this.flag = true
    this.model = Object.assign({}, this.model, this.data)
  },
  methods: {
    commit () {
      if (!(this.model.f_tablebase >= 0)) {
        this.$showMessage('请检查你录入的表底数')
        return
      }
      if (this.model.f_tablebase <= this.model.f_last_tablebase) {
        this.$showMessage('录入本期表底数不能小于等于上期表底数！')
        return
      }
      if (!(this.model.imgName && this.model.imgName.length > 0)) {
        this.$showMessage('请录入抄表照片！')
        return
      }
      if (!this.flag) {
        this.$showAlert('系统正在进行抄表，请勿重复操作！', 'warning', 2000)
        return
      }
      this.model.lastImgName = `.${this.model.f_user_name}${this.model.imgName.substring(this.model.imgName.indexOf('.'))}`
      // 设置抄表按钮不可用
      this.flag = false
      // 将用户编号放入抄表照片名中
      console.log(this.model.lastImgName)
      this.$resetpost('rs/logic/phone-readmeter', this.model, {rejectMsg: null, resolve: null}).then((res) => {
        console.log(res)
        if (res.data && res.data.status === 200) {
          console.log('抄表完成！')
          // 抄表完成设置按钮可用
          this.flag = true
          this.$showAlert('抄表成功！', 'success', 2000)
          // 发送抄表成功事件给父页面
          this.$dispatch('hand-success')
        }
      })
    }
  }
}
</script>
<style>
  .mt-5 {
    margin-top: 5px;
  }
  .mt-10 {
    margin-top: 10px;
  }
</style>
